<template>
	<view class="container">
		<view class="coupon-scroll">
			<scroll-view :style="{height:scrollHeight+'rpx'}" style="width: 100%;" scroll-y="true">
				<view class="coupon-item" v-for="(couponItem,couponIndex) in couponList" :key="couponItem.couponId" @tap="selectCoupon(couponIndex,couponItem)">
					<view class="coupon-item-left">
						<view class="coupom-item-title">
							<text class="yuansign">￥</text>
							<text class="coupon-price">{{couponItem.couponPrice}}</text>
							<text class="coupon-type">专享抵用券</text>
						</view>
						<text class="coupon-userprice">满50可用</text>
						<text class="coupon-item-value">仅限工种上门维修、安装、装修使用</text>
					</view>
					<view class="coupon-item-right">
						<view class="select-coupon" :class="{'selected':selectedCoupon==couponIndex}">
							<text>√</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="confirmuse-coupon">
			<text class="yh-price">优惠￥{{yhPrice|getFavourabletoFixed}}</text>
			<view class="use-btn" @tap="confirmUseCoupon()">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCouponList} from '@/apis/request.js';
	export default {
		data() {
			return {
				scrollHeight:0,
				usertoken:'',
				couponList:[],
				yhPrice:0,
				selectedCoupon:-1,
				orderprice:0,
				worktypeid:''
			}
		},
		created() {
			this.scrollHeight=uni.getSystemInfoSync().windowHeight/uni.getSystemInfoSync().windowWidth*750-141;
			
		},
		onLoad(options) {
			this.orderprice=options.orderprice;
			this.worktypeid=options.worktypeid;
			this.usertoken=uni.getStorageSync('userInfo').token;
			this.getUsercouponList();
		},
		methods: {
			getUsercouponList(){
				this.$http({
					url:getCouponList,
					data:{
						
					},
					method:"GET",
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.usertoken
					}
				})
				.then(res=>{
					if(res[1].data.status=='200'){
						this.couponList=res[1].data.data;
						this.couponisSelected=new Array(res[1].data.data.length).fill(false);
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			selectCoupon(couponIndex,couponItem){
				this.selectedCoupon=couponIndex;
				this.yhPrice=couponItem.couponPrice;
			},
			confirmUseCoupon(){
				uni.setStorageSync('useCouponIdprice',{
				     couponid:this.couponList[this.selectedCoupon].couponId,
					 couponprice:this.couponList[this.selectedCoupon].couponPrice
				});
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					});
				},200);
			}
		},
		filters:{
			getFavourabletoFixed(val){
				return val.toFixed(2);
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		padding-top: 20rpx;
		background-color: rgba(244, 248, 251, 1);
		.coupon-scroll{
			width: 680rpx;
			margin: auto;
			height: auto;
			.coupon-item{
				width: 100%;
				height: auto;
				background: url('/static/img_64.png') no-repeat;
				background-size: 100% 100%;
				padding-top:25rpx;
				padding-bottom: 25rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				.coupon-item-left{width: 480rpx;margin-left: 100rpx;height: auto;color: #FFFFFF;}
				.coupom-item-title{width: 100%;display: flex;line-height: 60rpx;height: 60rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
				.yuansign{font-size:40rpx ;}
				.coupon-price{font-size: 60rpx;margin-left: 5rpx;padding: 0rpx;}
				.coupon-type{font-size: 35rpx;font-weight: 100;margin-left: 15rpx;}
				.coupon-userprice{font-size: 28rpx;display: block;margin-top: 10rpx;}
				.coupon-item-value{font-size: 23rpx;display: block;margin-top:10rpx;}
				.coupon-item-right{flex: 1;display: flex;justify-content: center;align-items: center;}
				.select-coupon{color: #FFFFFF;font-size: 16rpx;width: 33rpx;height: 33rpx;border-radius: 100%;display: flex;justify-content: center;align-items: center;background-color: #FFFFFF;}
			    .selected{background-color: rgba(255, 157, 92, 1);}
			}
		}
		.confirmuse-coupon{
		   width: 100%;
		   height: 100rpx;
		   border-top: 1rpx solid #F1F1F1;
		   display: flex;
		   justify-content: space-between;
		   align-items: center;
		   background-color: #fff;
		   position: fixed;
		   bottom: 0rpx;
		   .yh-price{color: rgba(255, 0, 0, 1);font-size: 28rpx;margin-left: 35rpx;}
		   .use-btn{background-color: rgba(14, 174, 100, 1);color: #FFFFFF;margin-right: 35rpx;border-radius: 10rpx;width:200rpx;height: 80rpx;display: flex;justify-content: center;align-items: center;font-size: 26rpx;}
		}
	}
</style>
